import React, { Component } from 'react'
import { Checkbox, Button } from 'antd'

import { WithStore } from './util'

let Item = React.memo((props) => {
    console.log(props);
    const {item, className, change, del} = props
    const { 
        checked, title
    } = item
    return (
        <li className={className} >
            <span>
                <Checkbox 
                    checked={checked} 
                    onChange={() => change(item)} 
                />
                {
                    checked ? (<s>
                        {title}
                    </s>) : title
                }
            </span>
            <Button 
                type="dashed" 
                onClick={() => del(item)} 
            >
                Del
            </Button>
        </li>
    )
})

Item = WithStore(Item)

const List = ({ data }) => {
    return (
        <ul className='list' >
            {
                data.map(item => (
                    <Item 
                        className='list-item'
                        item={item}
                        key={item.id}
                    />
                ))
            }
        </ul>
    )
}

export default WithStore(List)